<template>
  <a-layout>
    <a-card title="常用快捷功能">
      <a-row> <a-button @click="add">+ 增加常用功能</a-button></a-row>
      <div v-for="item in userList" :key="item.id" class="menu-list">
        <div style="text-align: center">
          <span @click="goItem(item)" class="item">{{
            item.name
          }}</span>
        </div>
      </div>
    </a-card>
    <!-- 表单申请 -->
    <menu-form
      ref="menuForm"
      :menuFormVisiable="menuForm.visiable"
      @close="handleMenuFormClose"
      @success="handleMenuFormSuccess"
    >
    </menu-form>
  </a-layout>
</template>
<script>
import MenuForm from "@/views/dynamicForm/MenuForm";

export default {
  name: "QuickMenu",
  props: {
    username: {
      require: true,
    },
  },
  data() {
    return {
      userList: [],
      menuForm: {
        visiable: false,
      },
      visible: false,
      confirmLoading: false,
    };
  },
  components: { MenuForm },
  mounted() {
    this.init();
  },
  methods: {
    goItem(item) {
      // 打开菜单 URL
       this.$router.push(item.path)
    },
    add(){
      this.menuForm.visiable = true;
    },
    handleMenuFormClose() {
      this.menuForm.visiable = false;
      this.init();
    },
    handleMenuFormSuccess() {
      this.menuForm.visiable = false;
      this.$message.success("修改成功");
      this.$emit("applyOk");
      this.init();
    },
    handleOk() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      this.visible = false;
    },
    init() {
      this.$get('/admin/userCommonFun/commonData').then((r) => {
        let data = r.data
        if (data != null) {
          this.userList = data
        }
      })
    },
  },
};
</script>
<style scoped>
.menu-list {
  margin: 30px 40px 10px 0px;
  display: inline-block;
}
.menu-list .item {
  height: 28px;
  line-height: 28px;
  display: inline-block;
  color: #333333;
  border: 1px solid #ccc;
  border-radius: 2px !important;
  padding: 0px 9px;
  min-width: 180px;
  text-align: center;
  font-size: 13px;
  color: #666;
}
.menu-list .item:hover {
  height: 28px;
  line-height: 28px;
  display: inline-block;
  color: #0065ff;
  border: 1px solid #0065ff;
  border-radius: 2px !important;
  padding: 0px 9px;
}
</style>
